<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/login.css"/>
		<link rel="stylesheet" type="text/css" href="../css/register.css"/>
		<link rel="stylesheet" type="text/css" href="../css/rest.css"/>
		
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
			<a  href="index1.html">
				<span>
						<?xml version="1.0" encoding="utf-8"?>
						<svg version="1.1" width="25" height="25" style="margin-top: 10px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve" fill="white">
						<g><g transform="matrix(1 0 0 -1 0 1008)"><path d="M241.9,508l490,490l26.3-26.3L294.4,508L758.1,44.3L731.9,18L241.9,508z"/></g></g>
						</svg>
				</span>
			</a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content" style="background: url(../images/bg.jpg);">
			<form  class="mui-input-group" style="margin-top: 15vw;">
				<div class="mui-input-row">
					<label>
						<?xml version="1.0" standalone="no"?>
						<svg width="25" height="25" viewBox="0 0 384 384" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white">
						  <path d="M192 192c-53 0 -96 43 -96 96s43 96 96 96s96 -43 96 -96s-43 -96 -96 -96zM192 144c64 0 192 -32 192 -96v-48h-384v48c0 64 128 96 192 96z" transform="matrix(1,0,0,-1,0,384)"/>
						</svg>
					</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="用户名/手机/邮箱">
				</div>
			</form>
			<form action=""  class="mui-input-group">
				<div class="mui-input-row">
					<label>
						<?xml version="1.0" standalone="no"?>
						<svg width="25" height="25" viewBox="0 0 320 384" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white">
						  <path d="M280 262c22 0 40 -18 40 -40v-200c0 -22 -18 -40 -40 -40h-240c-22 0 -40 18 -40 40v200c0 22 18 40 40 40h20v40c0 55 45 100 100 100s100 -45 100 -100v-40h20zM160 80c22 0 40 18 40 40s-18 40 -40 40s-40 -18 -40 -40s18 -40 40 -40zM222 262v40c0 34 -28 62 -62 62 s-62 -28 -62 -62v-40h124z" transform="matrix(1,0,0,-1,0,384)"/>
						</svg>
					</label>
					<input  type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<form action=""  class="mui-input-group">
				<div class="mui-input-row">
					<label>
						<?xml version="1.0" standalone="no"?>
						<svg width="25" height="25" viewBox="0 0 320 384" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white">
						  <path d="M280 262c22 0 40 -18 40 -40v-200c0 -22 -18 -40 -40 -40h-240c-22 0 -40 18 -40 40v200c0 22 18 40 40 40h20v40c0 55 45 100 100 100s100 -45 100 -100v-40h20zM160 80c22 0 40 18 40 40s-18 40 -40 40s-40 -18 -40 -40s18 -40 40 -40zM222 262v40c0 34 -28 62 -62 62 s-62 -28 -62 -62v-40h124z" transform="matrix(1,0,0,-1,0,384)"/>
						</svg>
					</label>
					<input  type="password" class="mui-input-clear mui-input" placeholder="再次输入密码">
				</div>
			</form>
			<form action=""  class="mui-input-group" id="tels">
				<div class="mui-input-row">
					<label>
						<?xml version="1.0" standalone="no"?>
						<svg width="25" height="25" viewBox="0 0 384 384" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white">
						  <path d="M363 117c12 0 21 -9 21 -21v-75c0 -12 -9 -21 -21 -21c-201 0 -363 162 -363 363c0 12 9 21 21 21h75c12 0 21 -9 21 -21c0 -27 4 -52 13 -77c2 -7 0 -16 -5 -21l-47 -47c31 -61 80 -110 141 -141l47 47c5 6 14 7 21 5c23 -7 49 -12 76 -12z" transform="matrix(1,0,0,-1,0,384)"/>
						</svg>
					<button type="button" id="btn" style="background: white;">获取验证码</button>
					</label>
					<input id='tel' type="tel" class="mui-input-clear mui-input" placeholder="请输入11位手机号">
				</div>
				<div class="mui-input-row">
					<label>
						<?xml version="1.0" standalone="no"?>
						<svg width="25" height="25" viewBox="0 0 416 384" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="white">
						  <path d="M208 400c114 0 208 -94 208 -208s-94 -208 -208 -208s-208 94 -208 208s94 208 208 208zM232 88v40h-48v-40h48zM232 176v128h-48v-128h48z" transform="matrix(1,0,0,-1,0,384)"/>
						</svg>
					</label>
					<input id='msg-text' type="text" class="mui-input-clear mui-input" placeholder="请输入验证码">
				</div>
			</form>
			<!--<form class="mui-input-group">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						自动登录
						<div id="autoLogin" class="mui-switch">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
			</form>-->
			<div class="mui-content-padded">
				<form class="link-area1">
					<label style="color: white;">
					<input name="radio1" type="radio">
						同意并已阅读《用户协议》
					</label>
				</form> 
				<button id='login' class="mui-btn mui-btn-block ">注册</button>
				<div class="link-area">
					<a id='reg' style="color: white;" href="login.html">返回登录</a>
					<!--<span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>-->
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.enterfocus.js"></script>
		<script src="../js/app.js"></script>
		<script>
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				$.plusReady(function() {
					plus.screen.lockOrientation("portrait-primary");
					var settings = app.getSettings();
					var state = app.getState();
					var mainPage = plus.webview.getWebviewById("main");
					var main_loaded_flag = false;
					if(!mainPage){
						mainPage = $.preload({
							"id": 'main',
							"url": 'main.html'
						});
					}else{
						main_loaded_flag = true;
					}
					
					mainPage.addEventListener("loaded",function () {
						main_loaded_flag = true;
					});
					var toMain = function() {
						//使用定时器的原因：
						//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
						var id = setInterval(function () {
							if(main_loaded_flag){
								clearInterval(id);
								$.fire(mainPage, 'show', null);
								mainPage.show("pop-in");
							}
						},20);
					};
					//检查 "登录状态/锁屏状态" 开始
					if (settings.autoLogin && state.token && settings.gestures) {
						$.openWindow({
							url: 'unlock.html',
							id: 'unlock',
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
					} else if (settings.autoLogin && state.token) {
						toMain();
					} else {
						app.setState(null);
						//第三方登录
						var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
						var auths = {};
						var oauthArea = doc.querySelector('.oauth-area');
						plus.oauth.getServices(function(services) {
							for (var i in services) {
								var service = services[i];
								auths[service.id] = service;
								if (~authBtns.indexOf(service.id)) {
									var isInstalled = app.isInstalled(service.id);
									var btn = document.createElement('div');
									//如果微信未安装，则为不启用状态
									btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
									btn.authId = service.id;
									btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
									oauthArea.appendChild(btn);
								}
							}
							$(oauthArea).on('tap', '.oauth-btn', function() {
								if (this.classList.contains('disabled')) {
									plus.nativeUI.toast('您尚未安装微信客户端');
									return;
								}
								var auth = auths[this.authId];
								var waiting = plus.nativeUI.showWaiting();
								auth.login(function() {
									waiting.close();
									plus.nativeUI.toast("登录认证成功");
									auth.getUserInfo(function() {
										plus.nativeUI.toast("获取用户信息成功");
										var name = auth.userInfo.nickname || auth.userInfo.name;
										app.createState(name, function() {
											toMain();
										});
									}, function(e) {
										plus.nativeUI.toast("获取用户信息失败：" + e.message);
									});
								}, function(e) {
									waiting.close();
									plus.nativeUI.toast("登录认证失败：" + e.message);
								});
							});
						}, function(e) {
							oauthArea.style.display = 'none';
							plus.nativeUI.toast("获取登录认证失败：" + e.message);
						});
					}
					// close splash
					setTimeout(function() {
						//关闭 splash
						plus.navigator.closeSplashscreen();
					}, 600);
					//检查 "登录状态/锁屏状态" 结束
					var loginButton = doc.getElementById('login');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var autoLoginButton = doc.getElementById("autoLogin");
					var regButton = doc.getElementById('reg');
					var forgetButton = doc.getElementById('forgetPassword');
					loginButton.addEventListener('tap', function(event) {
						var loginInfo = {
							account: accountBox.value,
							password: passwordBox.value
						};
						app.login(loginInfo, function(err) {
							if (err) {
								plus.nativeUI.toast(err);
								return;
							}
							toMain();
						});
					});
					$.enterfocus('#login-form input', function() {
						$.trigger(loginButton, 'tap');
					});
					autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
					autoLoginButton.addEventListener('toggle', function(event) {
						setTimeout(function() {
							var isActive = event.detail.isActive;
							settings.autoLogin = isActive;
							app.setSettings(settings);
						}, 50);
					}, false);
					regButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'reg.html',
							id: 'reg',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					forgetButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'forget_password.html',
							id: 'forget_password',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					//
					window.addEventListener('resize', function() {
						oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
					}, false);
					//
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
		</script>
	</body>

</html>